﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Examples.aspx.cs" Inherits="WPS.Modules.StyleLibrary.Examples" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>{#stylelibrary_dlg.example_styles_title}</title>
	<script type="text/javascript" src="/Default/Scripts/jquery/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
	<script type="text/javascript" src="../../utils/mctabs.js"></script>
	<script type="text/javascript" src="../../utils/form_utils.js"></script>
	<script type="text/javascript" src="../../utils/editable_selects.js"></script>
	<script type="text/javascript" src="js/examples.js"></script>
	<script type="text/javascript" src="js/StyleSheet.js"></script>

	 <!-- Site styles or other styles are not loaded, to avoid affecting the demos. -->
	<link rel="Stylesheet" type="text/css" href="css/examples.css" title="wysiwyg" />
	<style type="text/css">
		/* <![CDATA[ */
		body {
			margin: 2em;
			font-family: Sans-Serif;
			font-size: 90%;
		}
		div.demo {
			margin-top: 1em;
			clear: both;
			border-top: 1px solid black;
			padding-top: 6px;
		}
		div.source {
			display: none;
		}
		.left {
			float: left;
			margin-right: 15px;
			margin-bottom: 5px;
		}
		.right {
			float: right;
			margin-left: 15px;
			margin-bottom: 5px;
		}
		/* ]]> */</style>
	<script type="text/javascript">
	var images = new Array();
	var tables = new Array();
	var textboxes = new Array();

	var selectedPanel = '<%= SelectedPanel %>';
	
	// Server side generated array
	<%= ExampleArray %>
	</script>
</head>
<body>
	<h1>{#stylelibrary_dlg.choose_example_style}</h1>
	<form runat="server">
	<p>{#stylelibrary_dlg.from_scratch}: 
		<input type="button" onclick="StyleLibraryExamplesDialog.noCopyStyle(selectedPanel)" value="{#stylelibrary_dlg.from_scratch_button}" />
		<input type="button" onclick="document.location.href = 'Overview.aspx?styles=' + selectedPanel;" value="{#cancel}" />
	</p>
	
	<!-- Table examples -->
	<div id="tables">
		<div id="demotable" class="source">
			<h2>{title} <input type="button" value="{#stylelibrary_dlg.copy_style}" onclick="StyleLibraryExamplesDialog.copyStyle(selectedPanel, '{title}');" /></h2>
			<table class="replaceme">
				<thead>
					<tr>
						<th>
							WPS Module
						</th>
						<th>
							Price (Euros)
						</th>
						<th>
							Active
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							Auto Scroll
						</td>
						<td>
							275,00
						</td>
						<td>
							Yes
						</td>
					</tr>
					<tr class="alt">
						<td>
							Newsletter
						</td>
						<td>
							400,00
						</td>
						<td>
							<a target="_blank" href="http://www.wpsnet.com/">No</a>
						</td>
					</tr>
					<tr>
						<td>
							Banner
						</td>
						<td>
							400,00
						</td>
						<td>
							Yes
						</td>
					</tr>
					<tr class="alt">
						<td>
							Daily tip
						</td>
						<td>
							275,00
						</td>
						<td>
							Yes
						</td>
					</tr>
					<tr>
						<td>
							Guest book
						</td>
						<td>
							275,00
						</td>
						<td>
							<a target="_blank" href="http://www.wpsnet.com/">No</a>
						</td>
					</tr>
				</tbody>
				<!-- tfoot>
				<tr>
					<td>
						Summary
					</td>
					<td>
						2275,00
					</td>
					<td>
						<a target="_blank" href="http://www.wpsnet.com/">Buy</a>
					</td>
				</tr>
			</tfoot -->
			</table>
			<div style="clear: both;">
			</div>
		</div>
	</div>
	
	<!-- Textbox examples -->
	<div id="textboxes">
		<div id="demotextbox" class="source">
			<h2>{title} <input type="button" value="{#stylelibrary_dlg.copy_style}" onclick="StyleLibraryExamplesDialog.copyStyle(selectedPanel, '{title}');" /></h2>
		<div class="replaceme" style="width: 200px;"><h2>{title}</h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper, mauris nec congue malesuada, sem lorem ultrices tellus, et rhoncus tortor mi ut arcu. Nulla facilisi. Nullam non magna eu purus placerat mattis non quis tortor. Mauris nec justo sed lectus feugiat accumsan sit amet ut libero. Nulla sed massa augue, nec varius nisl. Curabitur et lacus quis turpis euismod consequat vel et odio.</p>
		</div>
	</div>

	<!-- Textbox examples -->
	<div id="images">
		<div id="demoimage" class="source">
			<h2>{title} <input type="button" value="{#stylelibrary_dlg.copy_style}" onclick="StyleLibraryExamplesDialog.copyStyle(selectedPanel, '{title}');" /></h2>
		<img class="replaceme" src="img/StyleSheetImage.jpg" alt="Example style"/>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper, mauris nec congue malesuada, sem lorem ultrices tellus, et rhoncus tortor mi ut arcu. Nulla facilisi. Nullam non magna eu purus placerat mattis non quis tortor. Mauris nec justo sed lectus feugiat accumsan sit amet ut libero. Nulla sed massa augue, nec varius nisl. Curabitur et lacus quis turpis euismod consequat vel et odio.</p>
		</div>
	</div>
	
	</form>
</body>
</html>
